<template>
  <div class="mod-home">
    <!-- <h3>项目介绍</h3>
    <ul>
      <li>renren-fast-vue基于vue、element-ui构建开发，实现<a href="https://gitee.com/renrenio/renren-fast" target="_blank">renren-fast</a>后台管理前端功能，提供一套更优的前端解决方案</li>
      <li>前后端分离，通过token进行数据交互，可独立部署</li>
      <li>主题定制，通过scss变量统一一站式定制</li>
      <li>动态菜单，通过菜单管理统一管理访问路由</li>
      <li>数据切换，通过mock配置对接口数据／mock模拟数据进行切换</li>
      <li>发布时，可动态配置CDN静态资源／切换新旧版本</li>
      <li>演示地址：<a href="http://demo.open.renren.io/renren-fast" target="_blank">http://demo.open.renren.io/renren-fast</a> (账号密码：admin/admin)</li>
    </ul>
    <h3>获取帮助</h3>
    <ul>
      <li>官方社区：<a href="https://www.renren.io/community" target="_blank">https://www.renren.io/community</a></li>
      <li>前端Git地址：<a href="https://github.com/renrenio/renren-fast-vue" target="_blank">https://github.com/renrenio/renren-fast-vue</a></li>
      <li>后台Git地址：<a href="https://gitee.com/renrenio/renren-fast" target="_blank">https://gitee.com/renrenio/renren-fast</a></li>
      <li>代码生成器：<a href="https://gitee.com/renrenio/renren-generator" target="_blank">https://gitee.com/renrenio/renren-generator</a></li>
      <li>如需关注项目最新动态，请Watch、Star项目，同时也是对项目最好的支持</li>
    </ul>
    <h3>官方QQ群</h3>
    <ul>
      <li>高级群：324780204(大牛云集，跟大牛学习新技能)</li>
      <li>普通群：145799952(学习交流，互相解答各种疑问)</li>
    </ul> -->
    <el-row :gutter="20">
   
      <el-col :span="12">
        <el-card>
          <div id="main" ref="chart" :style="{width: '400px', height: '400px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
           <div id="zhu" ref="chart2" :style="{width: '400px', height: '400px'}"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
    data(){
       
    return{
      dataListX:[],
      dataListY:[],
      zhudataX:[],
      zhudataY:[],
      dataList:[]
      
      
      }
     

    },
    mounted(){
    this.getData();
    },
      
    activated(){
     this.initzhu()
     this.getzhuData()
     
    },
    methods:{
      getData(){
        this.$http({
        url: this.$http.adornUrl('/teacherservice/teacherpaper/data/list'),
        method: 'get',
        params: this.$http.adornParams({})
        }).then(({data}) => {
          console.log(data)
          this.dataListX=data.indexList
          this.dataListY=data.countList
          console.log("jdvnd",this.dataListY)
           this.initChartLine()
        })

      },

      getzhuData(){
        this.$http({
        url: this.$http.adornUrl('/teacherservice/teacherproject/data/list'),
        method: 'get',
        params: this.$http.adornParams({})
        }).then(({data}) => {
          console.log(data)
          // this.zhudataX=data.indexX
          // this.zhudataY=data.countY
          this.dataList=data.datalist
          console.log("jdvnd", this.zhudataX)
           this.initzhu()

        })

      },
      initChartLine(){
        // var chartDom = document.getElementById('main');
        var chartDom=this.$refs.chart
        var myChart = echarts.init(chartDom);     
        var option;
        // var datax=[];
        // for(let i=0;i<this.dataListX.length;i++){
        //   datax.push(this.dataListX[i]);
        // }
        // var datay=[];
        // for(let i=0;i<this.dataListY.length;i++){
        //   datay.push(this.dataListY[i]);
        // }
        // console.log("kgvnks",datax)

option = {
    xAxis: {
        type: 'category',
        data:this.dataListX
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data:this.dataListY,
        type: 'line',
        smooth: true
    }]
};

option && myChart.setOption(option);
      },
      initzhu(){
     
var chartDom = document.getElementById('zhu');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
        text: '教师论文获奖情况',
        subtext: '数据分析',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '获取类别',
            type: 'pie',
            radius: '50%',
            data: this.dataList,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);

      }
      

    }
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }
</style>

